<template>
  <div class="salarys-container">
    <div class="app-container">
      <!-- v-model是双向数据绑定的指令  配合v-bind:value + @input 来实现-->
      <!-- <input v-model="msg" type="text">{{ msg }}
      <hr>
      v-bind:value + @input 来实现v-model双向数据绑定
      <input type="text" :value="msg" @input="changemsg"> -->
      <!-- <son :msg="msg" @changeMsg="changeMsg" /> -->
      <!-- <son :value="msg" @input="changeMsg" /> -->
      <!-- 在组件上使用v-model
        1. 父传子 子传父
        2. 在子组件内部props接收的数据必须是value
        3. 在子组件内部发布的自定义事件必须是input
       -->
      <son v-model="msg" />
    </div>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Salarys',
  components: { Son },
  data() {
    return {
      msg: 'abc'
    }
  },
  methods: {
    changemsg(e) {
      this.msg = e.target.value
    },
    changeMsg(str) {
      this.msg = str
    }
  }
}
</script>

<style>

</style>
